<style include="cr-hidden-style cr-icons cr-shared-style">
  :host {
    --cr-customize-themes-grid-gap: 20px;
    --cr-customize-themes-icon-size: 72px;
    display: inline-block;
  }

  #thirdPartyThemeContainer {
    max-width: 544px;
    width: 100%;
  }

  #thirdPartyTheme {
    align-items: center;
    border: 1px solid var(--google-grey-300);
    border-radius: 5px;
    color: var(--cr-primary-text-color);
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    padding: 0 16px;
  }

  @media (prefers-color-scheme: dark) {
    #thirdPartyTheme {
      border-color: var(--google-grey-700);
    }
  }

  #thirdPartyBrushIcon {
    -webkit-mask-image: url(chrome://resources/cr_components/customize_themes/brush.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--cr-primary-text-color);
    margin-inline-end: 20px;
    min-height: 24px;
    min-width: 24px;
  }

  #thirdPartyThemeNameContainer {
    flex-grow: 1;
    margin-inline-end: 24px;
  }

  #thirdPartyThemeName {
    font-weight: bold;
  }

  #thirdPartyLink {
    --cr-icon-button-fill-color: var(--cr-primary-text-color);
    margin-inline-end: 24px;
  }

  #uninstallThirdPartyButton {
    margin: 16px 0;
  }

  #themesContainer {
    --cr-grid-gap: var(--cr-customize-themes-grid-gap);
  }

  #themesContainer > * {
    outline-width: 0;
  }

  :host-context(.focus-outline-visible) #themesContainer > *:focus {
    box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
  }

  #autogeneratedThemeContainer {
    cursor: pointer;
    position: relative;
  }

  /* colorPicker is placed on top of the theme icon to work around
     https://crbug.com/1162053 */
  #colorPicker {
    border: 0;
    height: var(--cr-customize-themes-icon-size);
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: var(--cr-customize-themes-icon-size);
  }

  #colorPickerIcon {
    -webkit-mask-image: url(chrome://resources/cr_components/customize_themes/colorize.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--google-grey-700);
    height: 20px;
    left: calc(50% - 10px);
    position: absolute;
    top: calc(50% - 10px);
    width: 20px;
  }

  cr-theme-icon {
    --cr-theme-icon-size: var(--cr-customize-themes-icon-size);
  }

  #autogeneratedTheme {
    --cr-theme-icon-frame-color: var(--google-grey-100);
    --cr-theme-icon-active-tab-color: white;
    --cr-theme-icon-stroke-color: var(--google-grey-300);
  }

  #defaultTheme {
    --cr-theme-icon-frame-color: rgb(222, 225, 230);
    --cr-theme-icon-active-tab-color: white;
  }

  @media (prefers-color-scheme: dark) {
    #defaultTheme {
      --cr-theme-icon-frame-color: rgb(var(--google-grey-900-rgb));
      --cr-theme-icon-active-tab-color: rgb(50, 54, 57);
    }
  }

  paper-tooltip {
    --paper-tooltip-delay-in: 100ms;
    --paper-tooltip-duration-in: 100ms;
    --paper-tooltip-duration-out: 100ms;
    --paper-tooltip-min-width: none;
    --paper-tooltip-padding: 5px 4px;
  }

</style>
<div id="thirdPartyThemeContainer" hidden="[[!isThirdPartyTheme_(selectedTheme)]]">
  <div id="thirdPartyTheme">
    <div id="thirdPartyBrushIcon"></div>
    <div id="thirdPartyThemeNameContainer">
      <div id="thirdPartyThemeName" >
        [[selectedTheme.info.thirdPartyThemeInfo.name]]
      </div>
      <div>[[i18n('thirdPartyThemeDescription')]]</div>
    </div>
    <cr-icon-button id="thirdPartyLink" class="icon-external" role="link"
        on-click="onThirdPartyLinkButtonClick_">
    </cr-icon-button>
    <cr-button id="uninstallThirdPartyButton"
        on-click="onUninstallThirdPartyThemeClick_">
      [[i18n('uninstallThirdPartyThemeButton')]]
    </cr-button>
  </div>
</div>
<cr-grid id="themesContainer" columns="6" role="radiogroup">
  <div aria-label="[[i18n('colorPickerLabel')]]"
      tabindex$="[[getTabIndex_('autogenerated', selectedTheme)]]"
      on-click="onAutogeneratedThemeClick_" role="radio"
      aria-checked$="[[getThemeIconCheckedStatus_('autogenerated', selectedTheme)]]">
    <div id="autogeneratedThemeContainer">
      <cr-theme-icon id="autogeneratedTheme"
          selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
      </cr-theme-icon>
      <div id="colorPickerIcon" hidden="[[isForcedTheme_(selectedTheme)]]"></div>
      <input id="colorPicker" type="color"
          on-change="onCustomFrameColorChange_">
    </div>
    <paper-tooltip offset="0" fit-to-visible-bounds>
      [[i18n('colorPickerLabel')]]
    </paper-tooltip>
  </div>
  <div aria-label="[[i18n('defaultThemeLabel')]]"
      tabindex$="[[getTabIndex_('default', selectedTheme)]]"
      on-click="onDefaultThemeClick_" role="radio"
      aria-checked$="[[getThemeIconCheckedStatus_('default', selectedTheme)]]">
    <cr-theme-icon id="defaultTheme"
        selected$="[[isThemeIconSelected_('default', selectedTheme)]]">
    </cr-theme-icon>
    <paper-tooltip offset="0" fit-to-visible-bounds>
      [[i18n('defaultThemeLabel')]]
    </paper-tooltip>
  </div>
  <template is="dom-repeat" id="themes" items="[[chromeThemes_]]">
    <div aria-label="[[item.label]]"
        tabindex$="[[getTabIndex_(item.id, selectedTheme)]]"
        on-click="onChromeThemeClick_" class="chrome-theme-wrapper" role="radio"
        aria-checked$="[[getThemeIconCheckedStatus_(item.id, selectedTheme)]]">
      <cr-theme-icon
          style="--cr-theme-icon-frame-color:
              [[skColorToRgba_(item.colors.frame)]];
              --cr-theme-icon-active-tab-color:
              [[skColorToRgba_(item.colors.activeTab)]];"
          selected$="[[isThemeIconSelected_(item.id, selectedTheme)]]">
      </cr-theme-icon>
      <paper-tooltip offset="0" fit-to-visible-bounds>
        [[item.label]]
      </paper-tooltip>
    </div>
  </template>
</cr-grid>
<template is="dom-if" if="[[showManagedThemeDialog_]]" restamp>
  <managed-dialog on-close="onManagedDialogClosed_"
      title="[[i18n('themeManagedDialogTitle')]]"
      body="[[i18n('themeManagedDialogBody')]]">
  </managed-dialog>
</template>
